<template>
	<div class="flexcenter">
		<div class="max_width paddingtb">
			<div class="flexleft">
				<img class="userImg margin_right2" :src="info.avatar" alt="">
				<div class="flex1">
					<div class="flexbetween">
						<div class="text_at color_three">{{info.username}}</div>
						<div class="themeBtn" @click="collect(info.id)">{{info.is_collect?"已收藏":"收藏"}}</div>
					</div>
					<div class="text_d color_six margin_top2">
						{{info.description}}
					</div>
				</div>
			</div>
			<!-- tab栏 -->
			<div class="ffffff radius mainpadding margin_top4">
				<div class="flexleft">
					<div :class="tabActive==index?'active margin_right3':'noActive margin_right3'"
						v-for="(item,index) in tabList" :key="index" @click="changeTab(index)">
						{{item.name}}
					</div>
				</div>
			</div>
			<!-- 优课 -->
			<div class="flexbetween flex_wrap" v-show="tabActive==0">
				<course v-for="item in list.data" :key="item.id" :child="item"></course>
			</div>
			<!-- 辅导 -->
			<div class="flexbetween flex_wrap" v-show="tabActive==1">
				<information v-for="item in list.data" :key="item.id" :child="item"></information>
			</div>
			<!-- 测试 -->
			<div class="flexbetween flex_wrap" v-show="tabActive==2">
				<testChild v-for="item in list.data" :key="item.id" :child="item"></testChild>
			</div>
			<!-- 资料 -->
			<div class="flexbetween flex_wrap" v-show="tabActive==3">
				<information v-for="item in list.data" :key="item.id" :child="item"></information>
			</div>
			<div class="flexcenter margin_top" v-if="list.total > 15">
				<el-pagination background layout="prev, pager, next" :page-size="15" :total="list.total"
					@current-change="listChange">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import { teacher_detail, collectTeacher } from "@/API/question"
	import { getCourse } from "@/API/home"
	import course from "@/views/fineCourse/components/course"
	import information from "@/views/information/components/information"
	import testChild from "@/views/test/components/testChild"
	export default {
		components: {
			course,
			information,
			testChild
		},
		data() {
			return {
				tabActive: 0,//分类:1=优课,2=辅导,3=测试,4=资料
				tabList: [{
					name: "优课",
				}, {
					name: "辅导",
				}, {
					name: "测试",
				}, {
					name: "资料",
				}],
				id: "",//老师id
				info: {},//老师详情
				list: {
					data: []
				},//课程列表
			}
		},
		created() {
			this.id = this.$route.query.id
			this.getInfo()
			this.getList()
		},
		methods: {
			async getInfo() { //老师详情
				let res = await teacher_detail({ id: this.id })
				this.info = res.data.data
			},
			async collect() { //收藏、取消收藏
				let res = await collectTeacher({ id: this.id })
				if (res.data.code == 1) {
					this.$message.success(res.data.msg)
					this.getInfo(this.id)
				} else {
					this.$message.error(res.data.msg)
				}
			},
			async getList(page) { //课程列表
				let res = await getCourse({
					page: page || 1,
					type: this.tabActive + 1,
					teacher_id: this.id,//教师id
					// period: this.njInfo.period,//学段:1=小学,2=初中,3=高中,4=大学
					// education_grade_id: this.njInfo.id,//年级id
					// sort_type: this.sort_type,//排序类型:1=好评率,2=收藏,3=销量,4=价格
					// weigh: this.weigh,//权重:1=升序,2=降序
				})
				this.list = res.data.data
				this.list.data = res.data.data.data
			},
			listChange(val) {
				console.log(val)
				this.getList(val)
			},
			changeTab(index) {
				this.tabActive = index
				this.getList()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.userImg {
		width: 80px;
		min-width: 80px;
		height: 80px;
		border-radius: 50%;
	}

	.noActive {
		font-size: 15px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.active {
		font-size: 15px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #3478F5;
		position: relative;
	}

	.active::after {
		content: '';
		width: 22px;
		height: 2px;
		background: #3478F5;
		border-radius: 6px 6px 6px 6px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -10px;
	}
</style>